<template>
  <div class="app-container">
    <!-- 场地设置 -->
    <el-form ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="场地名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入场地名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="8">
        <el-button type="primary" plain @click="goTemplate">定价模板</el-button>
        <el-button type="primary" plain @click="goHoliday">节假日设置</el-button>
        <!--         <el-button type="warning" plain @click="goCalendar(ids)">批量关联定价模板</el-button>-->
        <el-button type="warning" plain @click="linkHoliday(null)">批量关联节假日模板</el-button>
      </el-col>
      <right-toolbar @queryTable="getList" />
    </el-row>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectable" />
      <el-table-column label="场地名称" prop="name" min-width="200" />
      <el-table-column label="父级场地" prop="parentName" min-width="120" />
      <el-table-column label="起订时间" prop="minReserveTime" min-width="150">
        <template #default="scope">
          <span v-if="scope.row.minReserveTime==0">半小时</span>
          <span v-if="scope.row.minReserveTime==1">1小时</span>
          <span v-if="scope.row.minReserveTime==2">2小时</span>
        </template>
      </el-table-column>
      <el-table-column label="项目" prop="projectName" min-width="200" />
      <el-table-column label="状态" prop="status" min-width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status==0" type="warning">禁用</el-tag>
          <el-tag v-else type="success">启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="模板" prop="cardTypeStr" min-width="120">
        <template #default="scope">
          <el-button v-if="scope.row.priceTemplateBindedFlag" type="text" @click="goCalendar(scope.row)">已关联</el-button>
          <el-button v-else type="warning" size="small" plain @click="goCalendar(scope.row)">关联定价模板</el-button>
        </template>
      </el-table-column>
      <el-table-column label="节假日" prop="cardTypeStr" min-width="120">
        <template #default="scope">
          <el-button v-if="scope.row.holidayBindedFlag" type="text" @click="linkHoliday(scope.row)">已关联</el-button>
          <el-button v-else type="warning" size="small" plain @click="linkHoliday(scope.row)">关联节假日</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />

    <!-- 关联节假日 -->
    <dialogHolidyList :props="dialogHolidyListProps" :base-holidys="holidyList" @submitForm="resetQuery" />
  </div>
</template>

<script setup name="Pricing">
import { getCurrentInstance } from 'vue'
import { onMounted, reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import dialogHolidyList from './components/dialog/holidayList'
import { holidayPriceList, getlistWithJudge } from '../../../../api/ven'
import { useRouter } from 'vue-router'

const router = useRouter()
const { proxy } = getCurrentInstance()

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    status: undefined
  },
  loading: false,
  tableData: [],
  holidyList: [],
  total: 0,
  single: false
})
const { queryParams, loading, tableData, holidyList, total, single } = toRefs(data)
let selectedIds = []

// 获取列表
function getList() {
  loading.value = true
  getlistWithJudge(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

/**
 * 定价模板
 */
function goTemplate() {
  router.push({ path: 'priceTemplate' })
}

/**
 * 节假日设置
 */
function goHoliday() {
  router.push({ path: 'priceHoliday' })
}
// 节假日列表
function getHolidayList() {
  const query = {}
  holidayPriceList(query).then(res => {
    holidyList.value = res.rows
  })
}

const dialogPropsBase = {
  open: false,
  title: '',
  data: null
}
const dialogHolidyListProps = reactive({
  ...dialogPropsBase
})
// 关联节假日
function linkHoliday(row) {
  _.assign(dialogHolidyListProps, dialogPropsBase, {
    open: true,
    title: '关联节假日',
    data: { ...row }
  })
}
/**
 * 关联定价模板
 */
function goCalendar(row) {
  router.push({ name: 'PriceFullcalendar', params: { siteId: row.id }})
}
function selectable(row, index) {
  return true
}
function handleSelectionChange(selection) {
  selectedIds = selection.map(item => item.id)
  single.value = selection.length === 1
}

onMounted(() => {
  getList()
  getHolidayList()
})

</script>

<style scoped>

</style>
